import ajax from '../../utils/ajax';

const dataList = document.getElementById('dataList');
const pageSelect = document.getElementById('pageSelect');
let per_page = 1;
let page = 1;
let search_string = '';
let pageTotal;

init();

function init() {
  //渲染初始数据
  showData();
}

function showData() {
  dataList.innerHTML = '';
  ajax('get', 'api/getNote', {
    search_string,
    page,
    per_page,
  }).then(({ data: { list, total, pageSize } }) => {
    console.log(pageSize);
    per_page = pageSize;
    pageTotal = Math.ceil(total / pageSize);
    //生成分页按钮
    createPageSelect();
    // 渲染数据
    list.forEach(item => {
      const tr = document.createElement('tr');
      let td;

      td = document.createElement('td');
      td.innerText = item.id;
      tr.appendChild(td);

      td = document.createElement('td');
      td.innerText = item.title;
      tr.appendChild(td);

      td = document.createElement('td');
      td.innerText = item.updateTime.slice(0, 10);
      tr.appendChild(td);

      td = document.createElement('td');
      td.innerText = item.createTime.slice(0, 10);
      tr.appendChild(td);

      td = document.createElement('td');

      const modifyBtn = document.createElement('button');
      modifyBtn.innerText = '修改';
      modifyBtn.onclick = modifyBtn_click.bind(item.id);
      td.appendChild(modifyBtn);

      const deleteBtn = document.createElement('button');
      deleteBtn.innerText = '删除';
      deleteBtn.onclick = deleteBtn_click.bind(item.id);
      td.appendChild(deleteBtn);

      tr.appendChild(td);




      dataList.appendChild(tr);


    });
  })
}



function modifyBtn_click() {
  this;
}

function deleteBtn_click() {
  this;
}

//分页
function createPageSelect() {
  pageSelect.innerHTML = '';
  let btn;

  btn = document.createElement('button');
  btn.innerText = '首页';
  btn.onclick = function () {
    page = 1;
    showData();
  }
  pageSelect.appendChild(btn);

  // 上一页
  if (page > 1) {
    btn = document.createElement('button');
    btn.innerText = '上一页';
    btn.onclick = function () {
      page--;
      showData();
    }
    pageSelect.appendChild(btn);
  }

  // 数字按钮
  let start = page - 3 < 1 ? 1 : page - 3;
  let end = page + 3 > pageTotal ? pageTotal : page + 3;

  if (start > 1) {
    const span = document.createElement("span");
    span.innerText = '...';
    pageSelect.appendChild(span);
  }

  for (let i = start; i <= end; i++) {
    btn = document.createElement('button');
    btn.innerText = i;
    if (i == page) {
      btn.style.backgroundColor = 'red'
    } else {
      btn.onclick = function () {
        page = i;
        showData();
      }
    }
    pageSelect.appendChild(btn);
  }

  if (end <= 6 )  {
    for (let i = start; i <= end; i++) {
      btn = document.createElement('button');
      btn.innerText = i+4;
      btn.onclick = function () {
        page = i+end-start;
        showData();
      }
      pageSelect.appendChild(btn);
    }
  }

  if (end < pageTotal) {
    const span = document.createElement("span");
    span.innerText = '...';
    pageSelect.appendChild(span);
  }

  // 下一页
  if (page < pageTotal) {
    btn = document.createElement('button');
    btn.innerText = ' 下一页';
    btn.onclick = function () {
      page++;
      showData();
    }
    pageSelect.appendChild(btn);
  }

  if (pageTotal > 1) {
    btn = document.createElement('button');
    btn.innerText = '尾页';
    btn.onclick = function () {
      page = pageTotal;
      showData();
    }
    pageSelect.appendChild(btn);
  }
}
